<!--
 * @Author: 李振杰
 * @Date: 2025-03-05 19:08:46
 * @LastEditTime: 2025-03-06 14:59:40
 * @LastEditors: @李振杰
 * @Description: 
 * @FilePath: \yikai-page\src\views\supplier\PurchaseOrder.vue
 *  
-->
<template>
  <div class="container">
    <!-- 返回顶部按钮 -->
    <el-backtop target=".container" />

    <div class="header">
      <h3 class="title">订单列表</h3>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="待确认" name="second" />
        <el-tab-pane label="已驳回" name="third" />
        <el-tab-pane label="目前生产中" name="fourth" />
        <el-tab-pane label="质量检验" name="fifth" />
        <el-tab-pane label="待结算" name="sixth" />
        <el-tab-pane label="待发货" name="seventh" />
        <el-tab-pane label="待开票" name="eighth" />
        <el-tab-pane label="售后中" name="ninth" />
      </el-tabs>
    </div>

    <!-- 订单编号查询 -->
    <div class="search">
      <div class="search-row">
        <span>采购单号:</span>
        <el-input v-model="input" style="width: 130px" placeholder="请输入" />
        <span>销售单号:</span>
        <el-input v-model="input" style="width: 130px" placeholder="请输入" />
        <span>客户名称:</span>
        <el-input v-model="input" style="width: 110px" placeholder="请输入" />
        <span>销售人员:</span>
        <el-input v-model="input" style="width: 110px" placeholder="请输入" />
        <span>供应商:</span>
        <el-input v-model="input" style="width: 110px" placeholder="请输入" />
      </div>

      <div class="search-row">
        <span>产品编号:</span>
        <el-input v-model="input" style="width: 150px" placeholder="请输入" />
        <span>日期:</span>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
          />
        </div>
        <el-button color="#2F4050">查询</el-button>
        <el-button color="#2F4050">重置</el-button>
      </div>
    </div>

    <div
      style="
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
        margin-top: 15px;
      "
    >
      <el-button color="#2F4050">创建采购单</el-button>
    </div>

    <!-- 订单列表表格 -->
    <div class="table-container">
      <el-table
        ref="tableRef"
        :data="tableData"
        style="width: 100%"
        border
        stripe
      >
        <el-table-column
          prop="sn"
          label="采购单号"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="salesOrderSn"
          label="销售单号"
          width="100px"
          align="center"
        />
        <el-table-column
          prop="companyName"
          label="客户公司名称"
          width="110px"
          align="center"
        />
        <el-table-column
          prop="salesId"
          label="销售人员"
          width="80px"
          align="center"
        />
        <el-table-column
          prop="totalPrice"
          label="订单总金额"
          width="80px"
          align="center"
        />
        <el-table-column
          prop="supplierId"
          label="供应商"
          width="80px"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120px"
          align="center"
        />
        <el-table-column label="状态" width="100px" align="center">
          <template #default="scope">
            {{ getStatusLabel(scope.row.status) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="operation-buttons">
              <el-button type="text" size="small">详情</el-button>
              <template v-if="scope.row.status === 1">
                <el-button type="text" size="small">工序管理</el-button>
                <el-button type="text" size="small">延期确认</el-button>
                <el-button type="text" size="small">下载回传合同</el-button>
              </template>
              <template v-if="scope.row.status === 2 || scope.row.status === 8">
                <el-button type="text" size="small">质检报告</el-button>
                <el-button type="text" size="small">查看包装数据</el-button>
              </template>
              <template v-if="scope.row.status === 3">
                <el-button type="text" size="small">对账审核</el-button>
                <el-button type="text" size="small">创建付款单</el-button>
              </template>
              <template v-if="scope.row.status === 5">
                <el-button type="text" size="small">发货记录</el-button>
                <el-button type="text" size="small">上传开票信息</el-button>
              </template>
              <template v-if="scope.row.status === 6 || scope.row.status === 9">
                <el-button type="text" size="small">开票信息</el-button>
              </template>
              <template v-if="scope.row.status === 7">
                <el-button type="text" size="small">发货记录</el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ElTable } from "element-plus";

const input = ref("");
const activeName = ref("first"); // 默认选中 "全部"
const tableRef = ref<InstanceType<typeof ElTable>>();
const value1 = ref("");

// 订单状态映射
const statusLabels: Record<number, string> = {
  0: "待确认",
  1: "目前生产中",
  2: "质量检验",
  3: "待结算",
  4: "待发货",
  5: "待开票",
  6: "售后中",
  7: "待确认",
  8: "检验不合格",
  9: "已驳回"
};

// 订单状态标签页映射
const statusMap: Record<string, number | null> = {
  first: null, // "全部" 订单
  second: 0, // "待确认"
  third: 9, // "已驳回"
  fourth: 1, // "生产中"
  fifth: 2, // "质量检验"
  sixth: 3, // "待结算"
  seventh: 4, // "待发货"
  eighth: 5, // "待开票"
  ninth: 6 // "售后中"
};

// 根据状态编号返回对应的文本
const getStatusLabel = (status: number) => {
  return statusLabels[status] || "未知状态";
};

// 订单数据
const allOrders = ref([
  {
    sn: "PO20240305001",
    salesOrderSn: "SO20240301001",
    companyName: "上海某某科技有限公司",
    salesId: "张三",
    totalPrice: "¥5000",
    supplierId: "供应商A",
    createTime: "2024-03-01 14:22",
    status: 0 // 待确认
  },
  {
    sn: "PO20240305002",
    salesOrderSn: "SO20240301002",
    companyName: "深圳某某电子有限公司",
    salesId: "李四",
    totalPrice: "¥3200",
    supplierId: "供应商B",
    createTime: "2024-03-02 10:15",
    status: 1 // 生产中
  }
]);

// 当前展示的订单数据
const tableData = ref([...allOrders.value]);

// 处理标签切换
const handleClick = (tab: TabsPaneContext) => {
  console.log("切换到标签:", tab.paneName);

  const selectedStatus = statusMap[tab.paneName as string]; // 获取选中的订单状态编号
  console.log("选中的订单状态>>>", selectedStatus);

  if (selectedStatus !== null) {
    tableData.value = allOrders.value.filter(
      order => order.status === selectedStatus
    );
  } else {
    tableData.value = [...allOrders.value]; // 显示所有订单
  }
};

// 解决表格渲染问题
onMounted(() => {
  nextTick(() => {
    if (tableRef.value) {
      tableRef.value.doLayout();
    }
  });
});
</script>

<style scoped>
.container {
  padding: 10px;
  width: 1100px;
  overflow-y: auto;
  max-height: 90vh;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.search {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #bbb;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: 5px;
}

.search .el-button {
  margin-left: 20px;
}

/* 订单表格样式 */
.table-container {
  margin-top: 15px;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}

/* 操作列的按钮 */
.operation-buttons {
  display: flex;
  flex-wrap: wrap; /* 超过4个按钮时换行 */
  justify-content: space-between; /* 按钮均匀分布 */
  gap: 5px; /* 按钮间距 */
}

.operation-buttons .el-button {
  flex: 1; /* 让按钮平均分配空间 */
  min-width: 15%; /* 4个按钮时刚好铺满 */
  text-align: center;
}

/* 修改表头背景颜色 */
:deep(.el-table__header th) {
  background-color: #dbdddf !important;
}

/* 优化标签页样式 */
.demo-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 2px;
  }
}
/* 日期选择器样式 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
</style>
